<template>
    <div>
        <!-- 对话内容输入框 -->
        <input v-model="content" placeholder="请输入对话内容，不得超过1000个字符" /><br><br>
        <!-- 图片文件名输入框 -->
        <input v-model="fileName" placeholder="请输入图片文件名......" /><br><br>
        <!-- 生成图片按钮 -->
        <button @click="generateImage">点我-开始生成图片!</button><br><br>
        <!-- 显示后端返回的文本 -->
        <h3>{{ messageText }}</h3><br>
        <!-- 显示图片按钮 -->
        <button @click="fetchImage">显示图片</button><br>
        <!-- 图片链接 -->
        <a :href="'http://localhost:8080/' + fileName + '.png'">点击这里查看图片</a>
        <!-- 条件渲染图片 -->
        <img v-if="imageUrl" :src="'http://localhost:8080/' + fileName + '.png'" width="300px" height="300px" /><br>
    </div>
</template>

<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';

// 初始化状态变量
const content = ref(''); // 初始化为空字符串
const fileName = ref(''); // 初始化为空字符串
const messageText = ref(''); // 初始化用于显示后端返回文本的变量
const imageUrl = ref(''); // 初始化图片URL变量

/**
 * 异步函数：生成图片
 * 调用后端API生成图片，并处理返回的数据
 */
async function generateImage() {
    try {
        alert("图片开始生成！");
        const response = await axios({
            method: "post",
            url: "http://localhost:8080/image",
            headers: {
                'Content-Type': 'application/json'
            },
            data: {
                content: content.value,
                fileName: fileName.value
            }
        });
        alert("图片生成成功！");
        console.log(response.data);
        if (response.data) {
            messageText.value = response.data; // 更新文本为后端返回的文本
            console.log("前端返回成功！" + messageText.value);
        } else {
            console.error("后端返回的数据格式不正确！");
        }
    } catch (error) {
        console.error("请求后端时出错:", error);
    }
}

// 在组件挂载时执行的钩子函数
onMounted(() => {
    console.log("Draw 组件被挂载，渲染了！");
});

/**
 * 函数：fetchImage
 * 根据文件名获取图片URL
 */
const fetchImage = () => {
    try {
        if (!fileName.value) {
            console.error("文件名不能为空！");
            return;
        }
        imageUrl.value = "http://localhost:8080/" + fileName.value;
        console.log("设置的 imageUrl:", imageUrl.value);
    } catch (error) {
        console.error('获取图片时出错:', error);
    }
};
</script>

<style>
img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}
</style>